<template>
	<view class="content">
		<uni-search-bar placeholder="请输入物品名称" @confirm="search(searchName)" @cancel="cancel" cancel-text="取消" v-model="searchName">
			<template v-slot:searchIcon> 
				<uni-icons  color="#999999" size="18" type="search" />
			</template>
		</uni-search-bar>
		<button style="width: 30%;margin-bottom: 10rpx;" @click="getAll">刷新页面数据</button>
		<uni-list v-for="(item,index) in listData" :key="index" >
			<uni-list-item  :title="item.name" :note="item.num.toString()" showArrow
					:thumb="item.img" clickable="true"
					thumb-size="lg" @click="goDetail(item.id)" rightText="详情" >
				
			</uni-list-item>
		</uni-list>
		<view style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content:flex-start;justify-items: auto;">
			<!-- <button style="width: 30%;margin-bottom: 10rpx;" @click="openDB">打开DB</button> -->
			<!-- <button style="width: 30%;margin-bottom: 10rpx;" @click="isopen">是否打开</button> -->
			<!-- <button style="width: 30%;margin-bottom: 10rpx;" @click="createTable">创建数据表</button> -->
			<!-- <button style="width: 30%;margin-bottom: 10rpx;" @click="deleteTable()">删除数据表</button> -->
			<!-- <button style="width: 30%;margin-bottom: 10rpx;" @click="getAll">刷新页面数据</button> -->
			<!-- <button style="width: 30%;margin-bottom: 10rpx;" @click="goDetail">跳转</button> -->
			<!-- <button style="width: 30%;margin-bottom: 10rpx;" @click="closeDB">关闭DB</button> -->
			<!-- <button style="width: 30%;margin-bottom: 10rpx;" @click="executeSQLLone">执行SQL</button> -->
			<!-- <button style="width: 30%;margin-bottom: 10rpx;" @click="deleteDB">删除数据</button> -->
			<!-- <button style="width: 30%;margin-bottom: 10rpx;" @click="editDB">岁数+1</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData:[],
				searchName: ''
			}
		},
		onLoad() {
			// this.getSwipers()，
			if(!this.isopen()){
				this.openDB()
			};
			if(!this.iscreate()){
				this.createTable()
			};
			if(!this.iscreateRecord()){
				this.createTableRecord()
			};
			this.getAll()
			
		},
		methods: {
			openDB(){
				plus.sqlite.openDatabase({
					name: 'CangKu',
					path: '_doc/cangku.db',
					success: function(e){
						console.log('openCangKuDatabase success!');
						return uni.showToast({
							title:'启动数据库成功!',
							icon:'success'
						});
						
					},
					fail: function(e){
						console.log('openDatabase failed: '+JSON.stringify(e));
						return uni.showToast({
							title:'数据库启动失败!',
							icon:'error'
						})
					}
				});
			},
				
			//db是否打开
			isopen(){
				if (plus.sqlite.isOpenDatabase({name: 'CangKu',path: '_doc/cangku.db'})){
				    console.log('已经打开数据库。');
					return uni.showToast({
						title:'已经打开数据库!',
						icon:'success'
					})
					// return true;
				}else{
				    console.log('没有打开数据库！');
					// return false;
					// return uni.showToast({
					// 	title:'没有打开数据库!',
					// 	icon:'error'
					// })
				}
			},
			
			// 表是否创建
			iscreate(){
				plus.sqlite.selectSql({
				  name: 'CangKu',
				  sql: "SELECT name FROM sqlite_master WHERE type='table' AND name='goods'",
				  success: function(result) {
				    if (result.length > 0) {
				      console.log('表已经存在');
					  return true;
				    } else {
				      console.log('表不存在');
					  return false;
				    }
				  }
				});

			},
			// 表是否创建
			iscreateRecord(){
				plus.sqlite.selectSql({
				  name: 'CangKu',
				  sql: "SELECT name FROM sqlite_master WHERE type='table' AND name='record'",
				  success: function(result) {
				    if (result.length > 0) {
				      console.log('表已经存在');
					  return true;
				    } else {
				      console.log('表不存在');
					  return false;
				    }
				  }
				});
			
			},
			// 关闭数据库
			closeDB(){
				plus.sqlite.closeDatabase({
					name: 'first',
					success: function(e){
						console.log('closeDatabase success!');
						return uni.showToast({
							title:'关闭成功!',
							icon:'success'
						})
					},
					fail: function(e){
						console.log('closeDatabase failed: '+JSON.stringify(e));
						return uni.showToast({
							title:'关闭成功！',
							icon:'error'
						})
					}
				});
			},
			
			// 创建数据表
			createTable(){
				plus.sqlite.executeSql({
					name: 'CangKu',
					sql: 'CREATE TABLE IF NOT EXISTS goods (id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT, num INTEGER ,remark TEXT,img TEXT)',
					success: function(e){
						return uni.showToast({
							title:'物品表创建成功！!',
							icon:'success'
						})
						console.log('executeSql success!');		
					},
					fail: function(e){
						console.log('executeSql failed: '+JSON.stringify(e));
					}
				});
			},
			// 创建数据记录表
			createTableRecord(){
				plus.sqlite.executeSql({
					name: 'CangKu',
					sql: 'CREATE TABLE IF NOT EXISTS record (id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT, num INTEGER ,remark TEXT,type TEXT,time TIMESTAMP DEFAULT CURRENT_TIMESTAMP)',
					success: function(e){
						return uni.showToast({
							title:'数据记录表创建成功！!',
							icon:'success'
						})
						console.log('executeSql success!');		
					},
					fail: function(e){
						console.log('executeSql failed: '+JSON.stringify(e));
					}
				});
			},
			// 删除数据表
			deleteTable(){
				plus.sqlite.executeSql({
					name: 'CangKu',
					sql: 'drop table goods',
					success: function(e){
						return uni.showToast({
							title:'数据表删除成功！!',
							icon:'success'
						})
						console.log('executeSql success!');		
					},
					fail: function(e){
						console.log('executeSql failed: '+JSON.stringify(e));
					}
				});
				plus.sqlite.executeSql({
					name: 'CangKu',
					sql: 'drop table record',
					success: function(e){
						return uni.showToast({
							title:'数据表删除成功！!',
							icon:'success'
						})
						console.log('executeSql success!');		
					},
					fail: function(e){
						console.log('executeSql failed: '+JSON.stringify(e));
					}
				});
			},
			// 查询SQL语句
			getAll(){
				let that = this; // 备份 Vue 实例
				plus.sqlite.selectSql({
					name: 'CangKu',
					sql: 'select * from goods',
					success: function(data){
						console.log('selectSql success: ');
						for(var i in data){
							console.log(data[i]);
						}
						that.listData = data
						return uni.showToast({
							title:'查询成功！!',
							icon:'success'
						})
						
					},
					fail: function(e){
						console.log('selectSql failed: '+JSON.stringify(e));
					}
				});
			},
			goDetail(id){
				console.log("666")
				uni.navigateTo({
					url: '/pages/index/detail/detail?id=' + id
				});
			},
			search(searchName){
				let that = this; // 备份 Vue 实例
				const sql = `select  * from goods where name LIKE '%${searchName}%'`;
				plus.sqlite.selectSql({
					name: 'CangKu',
					sql: sql,
					success: function(data){
						console.log('selectSql success: ');
						for(var i in data){
							console.log(data[i]);
						}
						that.listData = data
						return uni.showToast({
							title:'查询成功！!',
							icon:'success'
						})
						
					},
					fail: function(e){
						console.log('selectSql failed: '+JSON.stringify(e));
					}
				});
			}
		}
			// 编辑数据
			// editDB(){
			// 	plus.sqlite.executeSql({
			// 		name: 'goods',
			// 		sql: "UPDATE database SET adress='北京' WHERE name = '张三'",
			// 		success: function(e){
			// 			console.log('executeSql success!');
			// 			return uni.showToast({
			// 				title:'执行语句成功！!',
			// 				icon:'success'
			// 			})
			// 		},
			// 		fail: function(e){
			// 			console.log('executeSql failed: '+JSON.stringify(e));
			// 		}
			// 	});
			// },
			
			
			
			
	} 

</script>

<style lang="scss"> 
    
</style> 
